<template>
  <div class="common-layout">
    <el-container 
      :style="`height:${height}px;--header-color:${color}; --color: ${deColor};`"
    >
      <el-header>
        <Header v-model:color="color" />
      </el-header>
      <el-container>
        <el-aside style="--el-aside-width: auto">
          <Leader :isExpand="expand" />
        </el-aside>
        <el-main>
          <!-- 路由主体部分 -->
          <div class="main">
            <!-- 面包屑导航 -->
            <el-row>
              <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item
                  v-for="path in pathArray"
                  :key="path.name"
                  :to="{ path }"
                  >{{ path.meta.title }}</el-breadcrumb-item
                >
              </el-breadcrumb>
            </el-row>
            <el-divider class="divider"></el-divider>
            <el-row>
              <el-collapse-transition>
                <keep-alive>
                  <router-view />
                </keep-alive>
              </el-collapse-transition>
            </el-row>
          </div>
        </el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ref } from "vue";
import Header from "./components/header/index.vue";
import Leader from "./components/leader/index.vue";
const height = ref(0);
const expand = ref(false);
function resize() {
  height.value = window.innerHeight;
  let fullScreen = window.innerWidth < 800;
  expand.value = fullScreen;
}
resize();
window.addEventListener("resize", resize, false);
const color = ref("");
const deColor = ref("#fff");
import router from "./router/router";
let pathArray = ref([]);

router.beforeEach((f, t, n) => {
  if (t.meta.title) {
    document.title = t.meta.title;
  }
  pathArray.value = f.matched;
  n();
});
</script>
<style lang="scss" >
:root {
  --color: mix(--color, blue);
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #e5e7eb;
  .common-layout {
    .el-header,
    .el-footer {
      text-align: center;
      line-height: 60px;
      border-color: #e5e7eb;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-top: none;
    }
    .top-title {
      font-weight: bold;
      letter-spacing: 1.3vw;
      font-size: 1.3vw;
      height: 100%;
      overflow: hidden;
      font-family: "微软雅黑", Arial, sans-serif;
      color: var(--color, white);
    }
    .el-header,
    .el-footer,
    .el-aside {
      background-color: var(--header-color, #409eff);
      transition: background-color 0s;
    }
    .el-footer {
      line-height: 60px;
    }

    .el-aside {
      text-align: center;
      overflow: visible;
    }
    
    .el-main {
      padding: 4px;
      box-sizing: border-box;
      .main {
        .divider {
          margin-top: 8px;
          margin-bottom: 8px;
        }
        padding: 15px;
        box-sizing: inherit;
        border: 1px solid var(--el-border-color-base);
        min-height: 100%;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        position: relative;
        overflow: hidden;
        background-color: white;
      }
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
</style>
